<template>
	<view style="background-color: #F5F5F5;">
		<!-- <custom-nav :boxStyle="navStyle">

		</custom-nav> -->

		<view class="page-home"
			style="backgroundImage: url('../../static/my/background_top.png');background-size: 100% 160rpx;">
			<!-- <view class="page-home" :style="{ backgroundImage: `url(${backGroundImage})` }"> -->
			<!-- <view class="swiper-wrap" :style="paddingStyle"> -->
			<view class="swiper-wrap">

				<swiper class="swiper">
					<swiper-item v-for="item in pictures" :key="item.id">
						<image :src="item.imageUrl"></image>
					</swiper-item>
				</swiper>

			</view>

			<view class="menu-box">
				<view class="menu-shadow-box">
					<view class="left" @tap="showContentPopup">
						<image class="title" src="/static/home/text-photo.png" mode="aspectFit"></image>
						<view class="desc mt-4">
							<view class="flex-start-center-gap-10">
								<text>一键生成高清证件照</text>
							</view>
							<view class="flex-start-center-gap-10">
								<text>支持打印 + 包邮</text>
							</view>
						</view>
						<image class="photo-make-icon" src="/static/home/icon1.png" mode="aspectFit"></image>
						<view class="img-title">推荐</view>
					</view>
					<view class="right">
						<!-- #ifndef MP-TOUTIAO -->
						<!-- <view class="right-item" @tap="toPrint">
							<view class="">
								<image class="title" src="/static/home/text-print.png" mode="aspectFit"></image>
								<view class="desc">高清打印+包邮</view>
							</view>

							<image class="photo-print-icon" src="../../static/home/icon2.png" mode="aspectFit">
							</image>
						</view> -->
						<!-- #endif -->
						<view class="right-item" @tap="toPage('/sub-ai/pages/ai-image/index')">
							<view class="">
								<image class="title" src="/static/home/text-ai.png" mode="aspectFit"></image>
								<view class="desc">AI一键换装</view>
							</view>
						
							<image class="photo-print-icon" src="/static/other/ai-logo.png" mode="aspectFit">
							</image>
						</view>
						<view class="right-box">
							<view class="right-item" @tap="toCut">
								<view class="">
									<image class="title" src="/static/home/text-cut.png" mode="aspectFit"></image>
									<view class="desc">自定义尺寸</view>
								</view>
							</view>
							<view class="right-item" @tap="toChangeColor">
								<view class="">
									<image class="short-title" src="/static/home/text-change-color.png"
										mode="aspectFit"></image>
									<view class="desc">底色任意换</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <scroll-tab :list="tabs" @change="onTabChange"></scroll-tab> -->
			<view class="classify-tabs">
				<view class="classify-tabsItem">
					<view class="classify-tabsItem1">
						<image src="../../static/home/icon4.png" style="height: 40rpx;width: 128rpx;" />
					</view>
					<view class="classify-tabsItem2" @tap="toCustom">
						<image src="../../static/home/icon3.png"
							style="height: 32rpx;width: 32rpx;margin-right: 8rpx;" />
						<text>自定义尺寸</text>
					</view>
				</view>
				<view class="classify-tabsItem3" @click="showContentPopup">
					<text>查看全部</text>
					<u-icon size="16" color="rgba(166, 166, 166, 1)" name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="classify-list" v-if="currentList">
				<view v-for="(item, index) in currentList" :key="index" @tap="toMakePhoto(item)">
					<view class="list-item flex-between-center">
						<!-- <view class="left">
								<image class="poster" src="/static/other/avator.png"></image>
							</view> -->
						<view class="center">
							<view class="center-top">
								<text class="title-content">
									{{ item.name }}
								</text>
								<image v-if="item.hot === 1" style="height: 28rpx;width: 28rpx;"
									src="../../static/home/icon5.svg"></image>
							</view>
							<!-- 自定义 -->
							<view v-if="item.width === 0" class="center-bottom">
								<text>自定义照片</text>
							</view>
							<!-- <view v-else class="center-bottom">
									<text
										class="center-bottom-item">{{ item.widthPixel }}*{{ item.heightPixel }}px</text>
									<view class="split-col-short"></view>
									<text class="center-bottom-item">{{ item.width }}*{{ item.height }}mm</text>
									<view class="split-col-short"></view>
									<text class="center-bottom-item">{{ item.minSize }}-{{ item.maxSize }}kb</text>
								</view> -->
							<view v-else class="center-bottom">
								像素尺寸：{{ item.widthPixel }}*{{ item.heightPixel }}px
							</view>
						</view>
						<view class="right">
							<div>电子照</div>
							<div v-if="item.post==1">冲印</div>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
		</view>
		
		<view class="share-btn" @click="toShare">
			<!-- 	<button class="hidden-btn" open-type="share">分享</button> -->
			<image src="/static/other/share-index.png"></image>
		</view>

		<content-popup ref="contentPopupRef"></content-popup>
		<empowerPopup :empowerShow="empowerShow" @close="empowerPopupClose"></empowerPopup>
	</view>
</template>

<script setup>
	import empowerPopup from '@/components/empower-popup/empower-popup.vue'
	import contentPopup from './compoments/contentPopup.vue'
	import customNav from '@/components/custom-nav/index.vue';
	import scrollTab from '@/components/scroll-tab/index.vue';
	import customSvg from '@/components/custom-svg/index.vue';
	import {
		imagePrefix
	} from '@/common/js/data.js';
	import {
		onLoad,
		onReachBottom,
		onShareAppMessage,
	} from '@dcloudio/uni-app';
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	import {
		checkLogin
	} from "@/common/js/method.js"
	import {
		ref,
		shallowRef,
		reactive,
	} from "vue";
	let navHeightInfo = getNavHeightTop();
	const contentPopupRef = ref(null);

	const backGroundImage = ref(`${imagePrefix}/photo/home-background.png`);
	const paddingStyle = reactive({
		"paddingTop": `${navHeightInfo.navTotalHeight + 20}px`
	});
	const pictures = shallowRef([{
		id: 1,
		imageUrl: 'https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/xcx2/banner1.png'
	}]);
	const tabs = shallowRef([]);
	const currentList = shallowRef(null);
	const currentTab = ref(0);
	const pageNo = ref(1);
	let navStyle = ref({});
	// const scrollable = ref(false);
	const status = ref('loadmore');
	const empowerShow = ref(false);
	function showContentPopup() {
		contentPopupRef.value.show = true;
	}
	function empowerPopupClose() {
		empowerShow.value = false;
	}

	// getSwiperList();
	const onPressView = (item) => {
		console.log(item);
		if (['/pages/versatile-show/index'].includes(item.visitPath)) {
			uni.switchTab({
				url: item.visitPath
			});
		} else {
			uni.navigateTo({
				url: item.visitPath,
			})
		}
	}

	const toShare = () => {
		uni.navigateTo({
			url: '/pages/share/share',
		})
	}

	const swiperCurrent = ref(0);

	function swiperCurrentChange(e) {
		swiperCurrent.value = e.target.current;
	}

	function clickItem(e) {
		swiperCurrent.value = e;
	}


	// const getSwiperList = async () => {
	// 	try {
	// 		let res = await uni.$request('/api/busi/swiper/select', {
	// 			type: 1
	// 		});
	// 		console.log('获取到首页轮播', res.data.swiperList);
	// 		// pictures.value = res.data.swiperList;
	// 		pictures.value = [
	// 			{id:1, imageUrl: '../../static/home/img1.png'}
	// 		];
	// 	} catch (e) {
	// 		//TODO handle the exception
	// 	}
	// };

	const getClassifyList = async (index) => {
		try {
			// 接口是分页的，查所有（不超过30）
			let res = await uni.$request('/api/busi/photoClass/select', {
				pageNo: 1,
				pageSize: 30,
			});
			console.log('获取证件照分类', res.data.photoClassList)
			tabs.value = res.data.photoClassList;
		} catch (e) {
			//TODO handle the exception
			// uni.$u.toast('分类数据失败');
			// throw Error('分类数据失败');
		}

	}

	const queryTabData = async (isLoadMore) => {
		try {
			status.value = 'loading';
			const index = currentTab.value; //当前tab在列表中索引
			// 下一页
			const _pageNo = isLoadMore ? pageNo.value + 1 : 1;
			// 接口是分页的
			let res = await uni.$request('/api/busi/product/select/byClassId', {
				classId: tabs.value.length ? tabs.value[index].id : '1', //分类id
				pageNo: _pageNo,
				pageSize: 10,
			});
			pageNo.value = _pageNo;
			currentList.value = [...(isLoadMore ? currentList.value : []), ...res.data.productList];
			status.value = currentList.value.length === res.data.total ? 'nomore' : 'loadmore';
		} catch (e) {
			status.value = 'loadmore';
			uni.$u.toast('数据加载失败');
		}

	}

	const onTabChange = (index) => {
		currentTab.value = index;
		queryTabData();
	}


	// 监听分享
	onShareAppMessage(function(res) {
		const userInfoData = uni.getStorageSync('userInfo');
		return {
			path: '/pages/index/index?id=' + userInfoData.id,
		}
	})

	onLoad(async (params) => {
		// 分享者id
		if (params.id) {
			uni.setStorageSync('shareUserId', params.id);
		}
		// 先登录
		checkLogin().catch((err) => {
			console.log(err);
			empowerShow.value = true;
		});
		// uni.$login();
		// 获取轮播列表
		// getSwiperList();
		// 获取分类列表
		// await getClassifyList();
		// 获取当前分类的数据
		queryTabData();
	});

	onReachBottom(() => {
		console.log('触底');
		if (status.value === 'nomore') return;
		queryTabData(true);
	});
	const onScroll = (scrollTop) => {
		// // console.log('scrollTop', scrollTop);
		// if (scrollTop > 100) {
		// 	navStyle.value = {
		// 		background: '#fff',
		// 		color: '#000',
		// 	}
		// } else {
		// 	navStyle.value = {}
		// }

	}
	// const toSearch = () => {
	// 	uni.navigateTo({
	// 		url: '/pages/index/search'
	// 	});
	// }
	const toMakePhoto = (item) => {
		console.log('toMakePhoto', item)
		uni.navigateTo({
			url: item.width === 0 ? '/pages/make-photo/custom-photo' :
				`/pages/make-photo/make-photo?id=${item.id}`
		})

	};
	const toPage = (url) => {
		uni.navigateTo({
			url
		});
	};
	const toCut = () => {
		uni.navigateTo({
			url: '/pages/photo-cut/photo-cut'
		});
	};
	const toCustom = () => {
		uni.navigateTo({
			url: '/pages/make-photo/custom-photo'
		});
	};
	const toPrint = () => {
		uni.navigateTo({
			url: '/pages/photo-print/photo-print'
		});
	};
	const toChangeColor = () => {
		uni.navigateTo({
			url: '/pages/change-background/change-background'
		});
	}
</script>

<style lang="less" scoped>
	.share-btn {
		position: fixed;
		right: 0;
		bottom: 5%;
		width: 140rpx;
		height: 152rpx;
		border: 0;

		.hidden-btn {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 99;
		}

		image {
			height: 100%;
			width: 100%;
		}
	}

	.search-box {
		width: 356rpx;
		height: 64rpx;
		background-color: #fff;
		border-radius: 200rpx;
		text-align: left;

		.search-text {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);
			line-height: 36rpx;
			margin-top: 1px;
		}

		.search-icon {
			margin-left: 32rpx;
		}
	}

	.page-home {
		background-repeat: no-repeat;
		background-size: 100% 100vh;
		height: 100vh;

		.swiper-wrap {
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			// background: linear-gradient(90deg, rgba(69, 144, 230, 1) 0%, rgba(69, 230, 218, 1) 100%);
		}

		.swiper,
		.swiper image {
			width: 100%;
			height: 200rpx;
			border-radius: 12rpx;
		}

		.menu-box {
			padding: 0 32rpx 40rpx 32rpx;

			.menu-shadow-box {
				display: flex;
				box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.02);
			}

			.left {
				position: relative;
				border-radius: 16rpx;
				width: 40%;
				padding: 24rpx 0rpx 0rpx 40rpx;
				height: 308rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-right: 2rpx solid rgba(245, 245, 245, 1);
				margin-right: 16rpx;

				.title {
					height: 44rpx;
					width: 160rpx;
				}

				.desc {
					line-height: 36rpx;
				}

				.img-title {
					box-sizing: border-box;
					padding: 16rpx 12rpx;
					position: absolute;
					right: 0;
					bottom: 4rpx;
					border-radius: 32rpx 0px 16rpx 0px;
					border: 2px solid rgba(22, 119, 255, 1);
					font-size: 12px;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 17.38px;
					color: rgba(22, 119, 255, 1);
				}
			}

			.photo-make-icon {
				margin-top: 44rpx;
				width: 80rpx;
				height: 76rpx;
			}

			.right {
				width: calc(60% - 16rpx);
				height: 308rpx;
				display: grid;
				grid-template-rows: 1fr 1fr;
				grid-gap: 16rpx;

				.right-box {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-gap: 16rpx;
				}

				.right-item {
					grid-gap: 16rpx;
					background: #fff;
					padding: 24rpx 30rpx;
					width: 100%;
					box-sizing: border-box;
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;

					.title {
						height: 44rpx;
						width: 128rpx;
					}

					.short-title {
						height: 44rpx;
						width: 120rpx;
					}

					.desc {
						line-height: 36rpx;
					}
				}

				// .change-background-icon {
				// 	width: 98rpx;
				// 	height: 48rpx;
				// }

				// .photo-cropping-icon {
				// 	width: 80rpx;
				// 	height: 80rpx;
				// }

				.photo-print-icon {
					width: 96rpx;
					height: 96rpx;
				}
			}
		}

		.classify-tabs {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx 0 32rpx;

			.classify-tabsItem {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.classify-tabsItem2 {
				border-radius: 40rpx;
				margin-left: 16rpx;
				background: rgba(255, 255, 255, 1);
				padding: 10rpx 16rpx 10rpx 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 0;
				color: rgba(166, 166, 166, 1);
				display: flex;
				align-items: center;
			}

			.classify-tabsItem3 {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 0;
				color: rgba(166, 166, 166, 1);
				display: flex;
				align-items: center;
			}
		}

		.classify-list {
			background: rgba(245, 245, 245, 1);
			padding: 20rpx 32rpx 20rpx 32rpx;
			justify-content: flex-start;

			.list-item {
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.02);
				padding: 32rpx;

				.left {
					width: 96rpx;
					height: 96rpx;
					margin-right: 32rpx;

					.poster {
						width: 96rpx;
						height: 96rpx;
						border-radius: 8rpx;
					}
				}

				.center {
					width: 100%;
					height: 96rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.center-top {
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0;
					line-height: 42rpx;
					color: rgba(0, 0, 0, 1);

					.title-content {
						position: relative;
						margin-right: 12rpx;
						font-size: 32rpx;
						font-weight: bold;
						letter-spacing: 0;
						line-height: 0;
						color: rgba(56, 56, 56, 1);
					}

					.hot-tag {
						width: 80rpx;
						position: absolute;
						left: calc(100% + 28rpx);
						top: -10rpx;
						// vertical-align: top;
					}
				}

				.center-bottom {
					width: 100%;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0;
					line-height: 36rpx;
					color: rgba(166, 166, 166, 1);

					.center-bottom-item {
						width: 150rpx;
						text-align: center;
						display: inline-block;
					}
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				gap: 16rpx;

				&>view {
					width: 76rpx;
					// height: 30rpx;
					box-sizing: border-box;
					opacity: 1;
					background: rgba(255, 255, 255, 1);
					border: 1px solid rgba(229, 229, 229, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 6rpx 0 4rpx 0;
					font-size: 20rpx;
					font-weight: 400;
					letter-spacing: 0;
					line-height: 1;
					color: rgba(166, 166, 166, 1);
					text-align: center;
				}
			}
		}
	}
</style>